<template>
  <h1>展示Pinia store</h1>
  <h2>我是: {{ store.name }}</h2>
  <h2>getters获取的名字: {{ store.getName }}</h2>
  <h2>地址: {{ store.address }}</h2>
  <h2>年龄: {{ store.age }}</h2>
  <h2>爱好: {{ store.hobby }}</h2>
  <button @click="store.name += 'O(∩_∩)O哈哈~'">直接修改名字</button>
  <button @click="editName">actions修改名字</button>
  <button @click="syncHobby">actions异步添加爱好</button>
  <button @click="editStore">同时修改多个store</button>
 
</template>

<script setup>
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { useStore } from "../../store/store.js";
let bb = ref("123654");
let cc = reactive({
  type: "你哈",
  obj: {
    ni: "shajsdh",
  },
});

let store = useStore();
let router = useRouter();


function editName() {
  store.updateName("嘿嘿嘿");
}
function syncHobby() {
  store.syncUpdateHobby("giao,giao,gaio!!!");
}
function editStore() {
  store.$patch({
    name: (store.name += "哈哈哈"),
    address: (store.address += "上海~"),
  });
}

</script>
<style lang="scss">
</style>
